<!-- Vue3 语法 -->
<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车,价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <button @click="changeCar">修改车</button>
    <br />
    <ul>
      <li v-for="item in games" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏的名字</button>
  </div>
</template>
<script setup name="Person">
/**
 * 对象响应式数据绑定.
 * ---
 * reactive 重新分配一个新对象会失去响应式(可以使用Object.assign()去整体替换).
 * 示例如 changeCar
 */
import { reactive } from "vue";
let car = reactive({ brand: "奔驰", price: 100 });
let games = reactive([
  { id: "aysdytfstart01", name: "王者荣耀" },
  { id: "aysdytfstart01", name: "原神" },
  { id: "aysdytfstart01", name: "三国志" },
]);
function changePrice() {
  car.price += 10;
}
function changeFirstGame() {
  games[0].name = "流星蝴蝶剑";
}
function changeCar() {
  // car = { brand: "奥拓", price: 1 } //  这种写法是无效的
  // car = reactive({ brand: "奥拓", price: 1 }) //  这种写法是无效的

  Object.assign(car, { brand: "奥拓", price: 1 });
}
</script>

<style>
li {
  font-size: 20px;
}
button {
  margin: 0 5px;
}
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
